<template>
    <section class="main-content">
        <div class="container-fluid">
            <div class="row" v-if="report !== null && Object.keys(this.report).length !== 0">
                <div class="col-md-3">
                    <sidebar v-bind:items="[
                        {name: 'Back', type: 'back', icon: 'fa fa-long-arrow-left fa-fw'},
                        {name: 'Delete report', functionName: 'confirmDeleteReport', type: 'function', icon: 'fa fa-trash fa-fw'},
                    ]"></sidebar>
                </div>

                <div class="col-md-9">

                    <h3 v-if="user">{{report.title}}</h3>
                    <p v-if="user">{{report.content}}</p>

                    <hr class="mt-4 mb-4">

                    <h1>Edit</h1>

                    <div v-if="report">
                        <div class="form-group">
                            <label>Title</label>
                            <input type="text" class="form-control" v-model="report.title">
                        </div>

                        <div class="form-group">
                            <label>TodayJob</label>
                            <textarea class="form-control" v-model="report.todayJob"></textarea>
                        </div>

                        <div class="form-group">
                            <label>TodoJob</label>
                            <textarea class="form-control" v-model="report.todoJob"></textarea>
                        </div>

                        <button v-on:click="saveReport()" class="btn btn-primary"><i class="fa fa-save fa-fw"></i> Save</button>
                    </div>
                </div>
            </div>

            <div class="row" v-if="report !== null && Object.keys(this.report).length === 0">
                <div class="col-md-12">
                    <p><i class="fa fa-frown-o fa-fw"></i> Hmm, that report couldn't be found.</p>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
    import { mapState } from 'vuex'

    export default {
        name: 'editReport',
        data () {
            return {
                report: null
            }
        },
        methods: {
            async loadReport () {
                try {
                    const response = await this.$store.dispatch('report/getReport', this.$route.query.id)
                    this.report = response
                } catch (error) {
                    this.$toasted.error('There was an error connecting to the server.')
                }
            },
            async saveReport () {
                try {
                    await this.$store.dispatch('report/saveReport', this.report)
                    this.$toasted.success('Saved.')

                    // Now that we've updated the report, let's update it in the reports array
                    await this.$store.dispatch('report/editReportInStack', this.report)
                } catch (error) {
                    this.$toasted.error('Your report couldn\'t be saved. There was an error connecting to the server.')
                }
            },
            confirmDeleteReport () {
                this.$modal.show('dialog', {
                    title: 'Delete ' + this.report.title,
                    text: 'Are you sure you want to delete this report?',
                    buttons: [
                        { title: 'Close' },
                        { title: 'Delete', handler: () => { this.deleteReport() } }
                    ]
                })
            },
            async deleteReport () {
                try {
                    await this.$store.dispatch('report/deleteReport', this.report)
                    await this.$store.dispatch('report/deleteReportFromStack', this.report)
                    this.$modal.hide('dialog')
                    this.$toasted.success('Deleted.')
                    this.$router.push({name: 'account'})
                } catch (error) {
                    this.$toasted.error('There was an error connecting to the server.')
                }
            }
        },
        computed: {
            ...mapState({
                user: state => state.user.user,
                reports: state => state.report.reports
            })
        },
        created () {
            this.loadReport()
        },
        mounted () {
            this.$router.app.$on('confirmDeleteReport', () => { this.confirmDeleteReport() })
        },
        beforeDestroy () {
            this.$router.app.$off('confirmDeleteReport')
        }
    }
</script>

<style lang="scss" scoped>
    @import '~@/assets/css/app.scss'
</style>
